import './index.less';
import debounce from 'lodash/debounce';
import PropTypes from 'ant-design-vue/es/_util/vue-types';
import { triggerEvent, inBrowser, isFun } from '../../utils/util';
import 'ant-design-vue/es/icon/style';
import Icon from 'ant-design-vue/es/icon';
import { defaultRenderLogoAntTitle } from '../SiderMenu/SiderMenu';
export var GlobalHeaderProps = {
  collapsed: PropTypes.bool,
  handleCollapse: PropTypes.func,
  isMobile: PropTypes.bool.def(false),
  fixedHeader: PropTypes.bool.def(false),
  logo: PropTypes.any,
  title: PropTypes.any,
  theme: PropTypes.any,
  menuRender: PropTypes.any,
  collapsedButtonRender: PropTypes.any,
  headerContentRender: PropTypes.any,
  rightContentRender: PropTypes.any
};

var defaultRenderCollapsedButton = function defaultRenderCollapsedButton(h, collapsed) {
  return h(Icon, {
    attrs: {
      type: collapsed ? 'menu-unfold' : 'menu-fold'
    }
  });
};

var GlobalHeader = {
  name: 'GlobalHeader',
  props: GlobalHeaderProps,
  render: function render(h) {
    var _this = this;

    var _this$$props = this.$props,
        logo = _this$$props.logo,
        title = _this$$props.title,
        theme = _this$$props.theme,
        collapsed = _this$$props.collapsed,
        menuHeaderRender = _this$$props.menuHeaderRender,
        rightContentRender = _this$$props.rightContentRender,
        headerContentRender = _this$$props.headerContentRender;

    var toggle = function toggle() {
      var _this$$props2 = _this.$props,
          collapsed = _this$$props2.collapsed,
          handleCollapse = _this$$props2.handleCollapse;
      if (handleCollapse) handleCollapse(!collapsed);

      _this.triggerResizeEvent();
    };

    var renderCollapsedButton = function renderCollapsedButton() {
      var _this$$props3 = _this.$props,
          collapsed = _this$$props3.collapsed,
          _this$$props3$collaps = _this$$props3.collapsedButtonRender,
          collapsedButtonRender = _this$$props3$collaps === void 0 ? defaultRenderCollapsedButton : _this$$props3$collaps,
          menuRender = _this$$props3.menuRender;

      if (collapsedButtonRender !== false && menuRender !== false) {
        return h("span", {
          "class": "ant-pro-global-header-trigger",
          on: {
            "click": toggle
          }
        }, [isFun(collapsedButtonRender) && collapsedButtonRender(h, collapsed) || collapsedButtonRender]);
      }

      return null;
    };

    var headerCls = 'ant-pro-global-header';
    var headerDom = defaultRenderLogoAntTitle(h, {
      logo: logo,
      title: title,
      menuHeaderRender: menuHeaderRender,
      collapsed: collapsed,
      style: {
        display: 'flex',
        alignItems: 'center'
      }
    });
    return h("div", {
      "class": headerCls,
      style: {
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        width: '100%',
        padding: '0 0 0 20px',
        background: theme === 'dark' ? '#001529' : '#ffffff',
        color: theme === 'dark' ? '#ffffff' : '#333333'
      }
    }, [h("router-link", {
      attrs: {
        to: {
          path: '/'
        },
        custom: true
      },
      style: {
        color: 'inherit'
      }
    }, [h("div", {
      attrs: {
        className: "ant-pro-header-logo"
      }
    }, [headerDom])]), renderCollapsedButton(), headerContentRender && h("div", {
      "class": "".concat(headerCls, "-content")
    }, [isFun(headerContentRender) && headerContentRender(h, this.$props) || headerContentRender]), isFun(rightContentRender) && rightContentRender(h, this.$props) || rightContentRender]);
  },
  methods: {
    triggerResizeEvent: debounce(function () {
      inBrowser && triggerEvent(window, 'resize');
    })
  },
  beforeDestroy: function beforeDestroy() {
    this.triggerResizeEvent.cancel && this.triggerResizeEvent.cancel();
  }
};
export default GlobalHeader;